Vue.component('login-component', {
    template: `
    <div id="login">
    <div class="container">
      <h1>登录</h1>
      <div class="form">
        <form action="#" autocomplete="off">
          <ul>
            <li>
              <label for="user">账号：</label>
              <input
                type="text"
                name="user"
                id="user"
                v-model="user"
                placeholder="请输入账号"
              />
            </li>
            <li>
              <label for="pwd">密码：</label>
              <input
                type="password"
                name="password"
                id="pwd"
                v-model="password"
                placeholder="请输入密码"
              />
            </li>
            <li><a href="#">立即注册</a></li>
            <li>
              <button type="submit" @click.prevent="submitForm">登录</button>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
    `,
    data() {
        return {
            user: '',
            password: '',
        }
    },
    methods: {
        submitForm() {
            if (this.user && this.password) {
                this.$emit("form-submitted", {
                    user: this.user,
                    password: this.password,
                });
            } else {
                alert('账号或密码为空！');
            }
        },
    },
})